<template>
  <Modal  class="importModel" :title="title" :width="500" v-model="model">
    <Form
      :model="form"
      :rules="rules"
      ref="form"
      :label-width="100">
      <FormItem>
          <Alert class="w400" type="success" show-icon v-if="status =='success'">导入成功</Alert>
          <Alert type="error" show-icon v-if="status =='error'">导入成功</Alert>
      </FormItem>
      <FormItem label="导入文件：">
          <!-- class="row-reverse" -->
        <Upload
            ref="upload"
            class="row-reverse"
            :multiple="true"
            :on-success="onUploadSuccess"
            :on-error="onUploadError"
            :format ="['xlsx','xls']"
            accept=".xlsx,.xls"
            :max-size="4096"
            :on-format-error="onUploadFormatError"
            :on-exceeded-size="onUploadSizeError"
            :before-upload="onBefore"
            :action="url"
            :headers="headers"
            :auto-upload="false">
          <Button  size="small" type="primary">选取文件</Button>
        </Upload>
      </FormItem>
      <FormItem label="下载模板：">
        <a class="link" :href="'https://zc-peppa-dev.oss-cn-hangzhou.aliyuncs.com/upload/application/20200509/' + templateUrl">文件导入模板    下载</a>
      </FormItem>
    </Form>
    <div slot="footer" align="center">
      <Button type="default" @click="onSave">关闭</Button>
    </div>
    <Loader :status="loading" @refresh="getFlowData"></Loader>
  </Modal>
</template>
<script>
import { uploadImageUrl } from '@/util';
export default {
  props: {
    title: {
      type: String,
      default: '导入'
    },
    url: {
      type: String,
      default: ''
    },
    templateUrl: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: 'pass',
      model: false,
      form: {
        year: ''
      },
      status: 'none',
      rules: {},
      fileList: [],
      headers: {
        Authorization: 'Bearer ' + this.$store.state.user.user.userToken
      }
    }
  },
  methods: {
    reset() {
      this.model = true
      this.status = 'none'
      this.$refs.upload.clearFiles()
    },
    onSave() {
      this.model = false
      this.status = 'none'
    },
    // 点击文件列表中已上传的文件时的钩子
    handlePreview() {
    },
    // 文件列表移除文件时的钩子
    handleRemove() {
    },
    // 文件上传成功的钩子函数
    onUploadSuccess(res) {
      this.loading = "pass"
      if (res.code !==200) {
        this.$Notice.error({
            title: '上传失败',
            desc: res.message
        });
      } else {
        this.$Notice.success({
            title: '上传成功',
            desc: res.message
        });
        this.model = false
        this.status = 'success'
        this.$emit('complete')
      }

    },
    // 文件上传失败的钩子函数
    onUploadError() {
      this.status = 'error'
    },
    onBefore() {
      this.loading = 'loading'
      this.$refs.upload.clearFiles()
    }
  }
}
</script>